<template>
  <div class="panel-box mg-all">
    <div class="panel-head">
      核销码
      <div class="panel-head-tool" v-if="count > 0" @click="$goPage('voucher', { order_no: order_no })">
        子核销码
        <van-icon class-prefix="ucai-icon" name="arrow_rgt" />
      </div>
    </div>
    <collapse-panel ref="collapse-panel" :isTopHandler=false :isCollapsed=isCollapsed>
      <template slot="panel">
        <ul class="panel-list">
          <li>
            <van-row>
              <van-col class="title" span="7">出游日期</van-col>
              <van-col class="desc" span="17">{{date}}</van-col>
            </van-row>
          </li>
        </ul>
        <div class="panel-body">
          <!-- 总核销码 -->
          <voucher-img-block v-if="data && data.code" :data="data" @afterRender="afterRenderVoucherImg" />
          <div class="mg-top-xl text-right">
            <van-button
              size="small"
              type="default"
              plain
              hairline
              @click="$goPage('voucher/record', { order_no: order_no })"
            >核销明细</van-button>
          </div>
        </div>
      </template>
    </collapse-panel>

  </div>
</template>

<script>
  import {
    Icon,
    Button,
    Row,
    Col,
    ActionSheet,
  } from 'vant'
  import VoucherImgBlock from "@cmpt/voucher/img-block"
  import CollapsePanel from "@cmpt/panel/collapse"

  import {
    VOUCHER_STATE_LIST
  } from '@data/dic/order'

  export default {
    name: 'voucher-panel',
    components: {
      [Icon.name]: Icon,
      [Button.name]: Button,
      [Row.name]: Row,
      [Col.name]: Col,

      VoucherImgBlock,
      CollapsePanel,
    },

    props: {
      order_no: { // 订单编号
        type: String,
        default: ''
      },
      data: { // 总核销码
        type: Object,
        default: null
      },
      count: { // 子核销码数量
        type: Number,
        default: 0
      },
      date: { // 出游日期
        type: String,
        default: 0
      },
      isCollapsed: {
        type: Boolean,
        default: false
      },
    },

    data() {
      return {}
    },

    computed: {},

    methods: {
      afterRenderVoucherImg() {
        this.$refs['collapse-panel'].setHeight()
      }
    },

    created() {},

  }
</script>
